<link rel="stylesheet" href="/assets/home/css/money.css" />
<!-- 请求 -->
<script src="/assets/home/plugin/axios/axios.min.js"></script>
<script src="/assets/home/plugin/axios/request.js"></script>
<!-- 上拉刷新 -->
<link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css" />
<script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>

<div class="tabs" style="padding-top: 0;">
    <ul>
        <li class="active" data-status="3">全部</li>
        <li data-status="0">待提现</li>
        <li data-status="1">已提现</li>
    </ul>
</div>
<div id="subjectlist" class="mescroll" style="height: 82%">
    <div class="list"></div>
</div>
<!-- 引入底部 -->
{include file='common/footer' /}

<script>
    let status = 3;
    // 页码
    let page = 1;

    $(".tabs li").click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        status = $(this).attr('data-status')
        downCallback();
    })

    var mescroll = new MeScroll("subjectlist", { //第一个参数"mescroll"对应上面布局结构div的id
        //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
        down: {
            callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        up: {
            callback: upCallback, //上拉加载的回调
            empty: {
                tip: "暂无相关数据~" //提示
            },
        }
    });

    //下拉刷新的回调
    function downCallback() {
        // 处理方式一: 重置mescroll内部变量(如mescroll.num=1和mescroll.hasNext=true), 自动触发upCallback
        mescroll.resetUpScroll();
        $("#subjectlist .list").html('');
    }

    //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
    async function upCallback(val) {
        page = val.num
        let result = await POST({
            url: `{:url('home/team/commission')}`, params: {
                page: page,
                status: status
            }
        });

        if (result.code == 0) {
            mui.toast(result.msg);
            mescroll.endBySize(0, 0);
            return false;
        }

        let list = result.data.list ?? [];
        let count = result.data.count ?? 0;

        //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
        //必传参数(当前页的数据个数, 总数据量)
        mescroll.endBySize(list.length, count);

        getPageData(list)
    }

    // 页面渲染
    function getPageData(data) {
        if (data.length > 0) {
            data.forEach((item) => {
                let btns = ''
                if(item.status == '0')
                {
                    btns = `<button class="btn mui-btn-warning" onclick="recover(${item.id})">提现</button>`
                }
                else
                {
                    btns = '<button class="btn mui-btn-success">已提现</button>'
                }
                let str = `
                  <div class="item">
                    <div class="content">
                        <a href="{:url('home/subject/info')}?subid=${item.subject.id}">
                            <div class="thumb">
                                <img src="${item.subject ? item.subject.thumbs_text : ''}" alt="">
                            </div>
                            <div class="info">
                                <div class="code">
                                    <span>订单号：</span>${item.order ? item.order.code : ''}
                                </div>
                                <div class="name">
                                    <span>课程名称：</span>${item.subject ? item.subject.title : '未知课程'}
                                </div>

                                <div class="user">
                                    <span>被推荐人：</span>${item.business ? item.business.nickname : '暂无推荐人'}
                                </div>

                                <div class="price">
                                    <span>可提现：</span>￥${item.amount}
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="footer">
                        <div class="btn-list">
                            ${btns}
                        </div>
                    </div>
                </div>
            `
                $("#subjectlist .list").append(str)
            })
        }
    };


    function recover(id)
    {
        mui.confirm(
            '是否确认提现',
            '提示',
            ['确认', '取消'],
            async function (res) {
                let result = await POST({
                    url: `{:url('home/team/recover')}`, params: {
                        comid: id
                    }
                });

                mui.toast(result.msg);
                if (result.code === 1) {
                    setTimeout(() => {
                        location.reload();
                    }, 1000)
                    return false;
                }
            }
        )
    }

</script>